<template>
	<view>
		<fui-loading :isFixed="true" :isMask="true" v-if="loadingShow"></fui-loading>
		<view style="display: flex;justify-content: center;align-items: center;height: 80vh;" v-else-if="!isShow">
			<fui-empty src="https://res.firstui.cn/static/images/component/empty/img_data_3x.png"
				title="暂无文章"></fui-empty>
		</view>
		<view class="box" :style="{backgroundColor:'rgb('+bgRgba+')'}" v-else>
			<!-- #ifdef H5 -->
			<fui-sticky>
				<fui-nav-bar title="软件详情" @leftClick="leftClick">
					<fui-icon name="arrowleft"></fui-icon>
				</fui-nav-bar>
			</fui-sticky>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="setup">
				<fui-icon size="50" color="#fff" name="arrowleft" @click="leftClick"></fui-icon>
			</view>
			<!-- #endif -->

			<view class="userInfo">
				<view class="avatar">
					<view class="">
						<fui-avatar radius='20' size="large" :src="app?.application_logo"
							mode="aspectFill"></fui-avatar>
					</view>
					<view class="user_text">
						<view class="user_name" style="color: #fff;">
							<text>{{app?.title}}</text>
						</view>
						<view class="user_value" style="color: #fff;font-size: 26rpx;">
							<text>{{app?.category_name}}</text>
						</view>
					</view>
				</view>
				<view class="view_count">
					<view style="font-size: 38rpx;color:#fff">
						{{app?.view_count}}
					</view>
					<view style="font-size: 24rpx;color:#fff;margin-top: 10rpx;">
						次安装
					</view>
				</view>
			</view>
			<view class="bottom-content">
				<view class="text-title1">
					<text style="font-size: 32rpx;color: #465cff;font-weight: bold;text-align: center;">软件图片</text>
				</view>
				<view class="images">
					<scroll-view class="scrollView" scroll-x="true"
						v-if="app?.application_img&&app?.application_img.length>1">
						<view class="recomItem" v-for="(item,index) in app?.application_img" :key="index">
							<image @click="previewImage(index)" style="border-radius: 20rpx;height: 95%;width: 60vw;"
								:src="item">
							</image>
						</view>
					</scroll-view>
					<view style="display: flex;justify-content: center;" v-for="(item,index) in app?.application_img"
						:key="index" v-else>
						<image @click="previewImage(index)" style="border-radius: 20rpx;height: 50vh;width: 60vw;"
							:src="item">
						</image>
					</view>
				</view>
				<view class="text-title">
					<text style="font-size: 32rpx;color: #465cff;font-weight: bold;text-align: center;">软件简介</text>
				</view>
				<!-- #ifdef H5 -->
				<view class="text">
					<text v-html="app?.content" class="TextContent"></text>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="text">
					<text selectable="true" class="TextContent">{{app?.content}}</text>
				</view>
				<!-- #endif -->
				<view
					style="position: fixed;bottom: 30rpx;width: 100vw;z-index: 999;display: flex;justify-content: center;">
					<fui-button height="80rpx" width="90%" text="安装软件" @click="openApp"></fui-button>
				</view>
			</view>
			<canvas style="position: fixed;top: -200px;" canvas-id="getImageThemeColorCanvas"
				id="getImageThemeColorCanvas">
			</canvas>
		</view>
	</view>
</template>

<script setup>
	import {
		parseCode,
		getHref,
		getDateDiff
	} from '@/utils/index.js'
	const api = uniCloud.importObject('qc-article', {
		customUI: true // 取消自动展示的交互提示界面
	})
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	const app = ref(null)
	//loading加载
	const loadingShow = ref(true)
	const isShow = ref(true)
	const publish_type = ref()
	const bgRgba = ref(null)
	onLoad(async (e) => {
		let item = JSON.parse(e.item)
		const {
			data
		} = await api.getAdDetails(item)
		app.value = data
		publish_type.value = item.publish_type
		if (JSON.stringify(data)=='{}') {
			loadingShow.value = false
			isShow.value = false
		} else {
			getImageThemeColor(app?.value?.application_logo, "getImageThemeColorCanvas", (resColor) => {
				bgRgba.value = resColor
			})
			loadingShow.value = false
		}

	})
	/**
	 * 获取图片主题色
	 * @param path
	 * 图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径
	 * @param canvasId
	 * 画布表示
	 * @param callback
	 * 回调函数，返回图片主题色的 RGB 颜色值
	 */
	function getImageThemeColor(path, canvasId, callback) {
		uni.getImageInfo({
			src: path,
			success: function(img) {
				// 创建一个 Canvas 对象
				const ctx = uni.createCanvasContext(canvasId);
				// 将图片绘制到 Canvas 上
				const imgWidth = 300;
				const imgHeight = 150;
				ctx.drawImage(img.path, 0, 0, imgWidth, imgHeight);
				ctx.save();
				ctx.draw(true, () => {
					uni.canvasGetImageData({
						canvasId: canvasId,
						x: 0,
						y: 0,
						width: imgWidth,
						height: imgHeight,
						success(res) {
							let data = res.data;
							let arr = [];
							let r = 1,
								g = 1,
								b = 1;
							// 取所有像素的平均值
							for (let row = 0; row < imgHeight; row++) {
								for (let col = 0; col < imgWidth; col++) {
									if (row == 0) {
										r += data[imgWidth * row + col];
										g += data[imgWidth * row + col + 1];
										b += data[imgWidth * row + col + 2];
										arr.push([r, g, b]);
									} else {
										r += data[(imgWidth * row + col) * 4];
										g += data[(imgWidth * row + col) * 4 + 1];
										b += data[(imgWidth * row + col) * 4 + 2];
										arr.push([r, g, b]);
									}
								}
							}
							// 求取平均值
							r /= imgWidth * imgHeight;
							g /= imgWidth * imgHeight;
							b /= imgWidth * imgHeight;
							// 将最终的值取整
							r = Math.round(r);
							g = Math.round(g);
							b = Math.round(b);

							if (!!callback) {
								// 返回图片主题色的 RGB 颜色值
								callback(`${r},${g},${b}`);
							}
						},
						fail(e) {
							console.log(e);
						}
					});
				});
			},
		});
	}
	//图片预览
	const previewImage = (index) => {
		uni.previewImage({
			current: index, // 当前显示图片的索引值
			urls: app.value.application_img, // 需要预览的图片列表，photoList要求必须是数组
			longPressActions: {
				itemList: ['保存图片', '识别二维码'],
				success: function(res) {
					console.log('选中了第' + (res.tapIndex + 1) + '个按钮,第' + (res.index + 1) + '张图片');
					if (res.tapIndex == 0) {
						plus.nativeUI.closePreviewImage();
						//保存到相册
						uni.saveImageToPhotosAlbum({
							filePath: app.value.application_img[index],
							success: function() {
								uni.showToast({
									title: '成功保存到系统相册中',
									icon: 'none',
									duration: 2000
								});
							}
						});
					} else {
						parseCode(app.value.application_img[index])
					}
				},
				fail: function(err) {

				}
			}
		})
	}
	//安装软件
	const openApp = async () => {
		// #ifdef APP-PLUS
		plus.runtime.openURL(app.value.application_url)
		// #endif
		// #ifdef H5
		window.open(app.value.application_url)
		// #endif
		app.value.view_count++
		await api.setViewCount({
			_id: app.value._id,
			publish_type: publish_type.value
		})
	}

	function leftClick() {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.text-title1 {
		padding: 32rpx 32rpx 0rpx 32rpx;
		text-align: center;
	}

	.text-title {
		padding: 32rpx 32rpx 10rpx 32rpx;
		text-align: center;
	}

	.scrollView {
		white-space: nowrap;
		width: 100%;
		height: 52vh;

		.recomItem {
			height: 100%;
			display: inline-block;
			margin: 33rpx 22rpx;
		}
	}

	.bottom-content {
		padding-bottom: 50rpx;
		background-color: #fff;
		min-height: calc(100vh - 200rpx);
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
	}


	.fui-banner__item {
		height: 100%;
	}

	.view_count {
		text-align: center;
	}

	.box {
		/* #ifdef APP-PLUS */
		padding-top: 50rpx;
		/* #endif */
		/* #ifdef H5 */
		background-color: #465cff;
		/* #endif */
		min-height: 100vh;
	}

	.images {
		margin-top: 20rpx;
		background-color: #fff;
	}

	.imageitem {
		width: 32%;
	}

	.text {
		color: var(--fui-color-subtitle);
		padding: 32rpx 32rpx 100rpx 32rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.TextContent{
		width: 100%;
		white-space: normal;
		word-break:break-word;
	}
	.bottom {
		z-index: 999;
		font-size: 24rpx;
		width: 100%;
		height: 100rpx;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-around;
		bottom: 0;
		background-color: var(--fui-bg-color);
	}

	.avatar {
		display: flex;
	}


	.button {
		padding: 10rpx 30rpx;
		color: #fff;
		border-radius: 40rpx;
		background-color: var(--fui-color-primary);
	}

	.user_text {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: 30rpx;
	}

	.user_value {
		color: var(--fui-color-subtitle);
		font-size: 20rpx;
	}

	.user_name {
		width: 50vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		vertical-align: middle;
	}

	.level {
		display: flex;
		padding: 2rpx 20rpx 2rpx 0;
		border-radius: 10rpx;
		justify-content: space-between;
		align-items: center;
		vertical-align: middle;
		font-size: 22rpx;
		background-color: #000;
		color: #febf40;

		image {
			margin-top: 5rpx;
		}
	}

	.title {
		background-color: var(--fui-bg-color);
		font-size: 36rpx;
		font-weight: bold;
		padding: 32rpx 32rpx 10rpx 32rpx;
	}

	.userInfo {
		height: 200rpx;
		display: flex;
		align-items: center;
		padding: 32rpx;
		justify-content: space-between;
	}

	.bottom_icon {
		height: 100%;
		width: 20%;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon_1 {
		color: var(--fui-color-danger);
	}

	.icon_2 {
		color: var(--fui-color-primary);
	}

	.images :deep(.uni-swiper-slides) {
		inset: 0px 80px 0px 80px !important;
	}

	.images :deep(.fui-banner__item) {
		display: flex;
		justify-items: center;
		align-items: center;
	}

	.images :deep(.uni-swiper-wrapper) {}

	.setup {
		padding: 32rpx 32rpx;
	}
</style>